<template>
  <div class="top-wrap">
    <!-- 官方榜 -->
    <div class="official-top">
      <div class="title flex font-20 font-bold">官方榜</div>
      <div
        class="top-item flex mgt-10"
        v-for="(item, index) in top4"
        :key="index"
      >
        <div class="top-img-wrap" @click="toDetail(item.id)">
          <img :src="item.coverImgUrl" alt="">
        </div>
        <div class="list-wrap mgl-30">
          <ul>
            <li
              v-for="(item, index) in item.tracks"
              :key="index"
              class="flex"
            >
              <div class="index">{{ index + 1 }}</div>
              <div class="song-name font-14">{{item.first}}</div>
              <div class="song-singer font-14">{{item.second}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 全球榜 -->
    <div class="global-top">
      <div class="title flex font-20 font-bold mgt-20">全球榜</div>
      <cover :imgList="restList" @clickToDo="toDetail">
        <template v-slot:img="scope">
          <img :src="scope.item.coverImgUrl + '?param=300y300'" alt="">
        </template>
      </cover>
    </div>
  </div>
</template>

<script>
import { getTopDetail } from '@/api/playList.js'
import Cover from '@/components/CoverImg/cover.vue'

export default {
  data () {
    return {
      // 全部排行榜信息
      // 前四
      top4: [],
      // 剩下的排名
      restList: []
    }
  },
  created () {
    this.showTopList()
  },
  components: {
    Cover
  },
  methods: {
    async showTopList () {
      const res = await getTopDetail()
      if (res.data.code !== 200) return this.$message.error('获取排行榜信息失败')
      this.topList = res.data.list
      console.log(res)
      this.top4List(this.topList)
      this.restTop(this.topList)
    },
    top4List (list) {
      // 切出前四个排行
      const top4List = []
      for (let i = 0; i < 4; i++) {
        top4List[i] = list[i]
      }
      this.top4 = top4List
    },
    restTop (list) {
      // 除去前四个
      // 直接复制数组,只是复制引用,整个新数组出来就行
      const rest = list.slice(0)
      rest.splice(0, 4)
      this.restList = rest
    },
    // 转到歌单页
    toDetail (id) {
      this.$router.push(`/playListDetail/${id}`)
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.top-wrap {
  padding: 0 3%;
}
.top-img-wrap {
  width: 160px;
  height: 160px;
  cursor: pointer;
  img {
    width: 160px;
    height: 160px;
  }
}
.top-item ul li {
  height: 32px;
  line-height: 32px;
  justify-content: space-between;
  width: 800px;
  .index {
    padding: 0 5px;
  }
  .song-name {
    width: 300px;
    text-align: left;
  }
  .song-singer {
    width: 500px;
    text-align: right;
    padding-right: 5px;
  }

  &:nth-child(odd) {
    background-color: #efefef;
  }
}
</style>
